<template>
    <div>
        <div class="m-flex">
            <van-sidebar class="m-category-height" v-model="activeKey">
                <van-sidebar-item v-for="item in categoryList" :key="item.id" :title="item.name"
                                  @click="getChildProduct(item.id)"><span>aaa</span>
                </van-sidebar-item>
            </van-sidebar>
            <div class="m-container">
                <div v-if="isShow">
                    <List :products="showProducts" @handleChange="changeShowProducts" @changeProductId="getProductId"/>
                </div>
                <div v-else>
                    <ChildCategory :childCategory="childCategory" @handleChange="changeShowProducts"/>
                    <List :products="products" @changeProductId="getProductId"/>
                </div>
            </div>
        </div>
        <div v-if="productId!==0">
            <Details :product-id="productId" @changeProductId="getProductId"/>
        </div>

        <Tabbar :show="1"/>
    </div>
</template>

<script>
    import {getCategoryList} from "../../utils/apis";
    import ChildCategory from "./components/ChildCategory";
    import List from "./components/List";
    import {getProductList} from "../../utils/apis";
    import Tabbar from "../../components/TabBar";
    import Details from "../../components/Details";

    export default {
        name: "Category",
        components: {Details, Tabbar, List, ChildCategory},
        data() {
            return {
                activeKey: 0,
                categoryList: [],
                childCategory: [],
                products: [],
                showProducts: [],
                isShow: false,
                productId: 0
            };
        },
        created() {
            this.getCategory()
        },
        methods: {
            getProductId(productId) {
                this.productId = productId
            },
            changeShowProducts(products, isShow) {
                this.showProducts = products
                this.isShow = isShow
            },
            getChildProduct(categoryId) {
                for (let i = 0; i < this.categoryList.length; i++) {
                    if (this.categoryList[i].id === categoryId) {
                        this.childCategory = this.categoryList[i].childCategory
                        getProductList({categoryId: this.categoryList[i].id}).then(res => {
                            this.products = res.data.list
                            this.showProducts = []
                            this.isShow = false
                        })
                    }
                }
            },
            getCategory() {
                getCategoryList({}).then(res => {
                    this.categoryList = res.data
                    this.childCategory = this.categoryList[0].childCategory
                    getProductList({categoryId: this.categoryList[0].id}).then(res => {
                        this.products = res.data.list
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .m-category-height {
        width: 80px;
    }

    .m-container {
        margin: 20px 12px 0 12px;
        width: calc(100% - 80px);
    }

    .m-flex {
        display: flex;
    }

    .van-sidebar {
        min-height: 731px;
        background-color: #f7f8fa;
    }
</style>
